<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <script>
        // 1.以前的做法，将axios挂载到Vue构造函数实例中 Vue.prototype.$axios=axios
        //   1.1解决什么问题：每一个组件（vue实例）可以通过原型链直接访问axios，而无需使用一次导入一次
        //   1。2.未解决什么问题：第一个接口的地址，参数还 要在组件 内部写，不便于维护
        //     *之前 大事件封装一个http.js网络蹭层来处理整个项目所有接口，维护起来很方便
        // 2。如何在Vue项目中使用Axios封装网络中间层
        // //  const instance=axios.create()
        //      作用1：全局配置axios，如基地址，网络超时等配置
        //      作用2：得到一个自定义的axios对象
        //         *axios.create() 相当于创建了一个包含全局配置的axios的副本
        //         *instance与axios不是同一个对象，instance多了全局配置
        //         *为什么不直接使用axios.defaults来设置全局配置呢，
        //          *原因：axios.defaults只是全局配置，不能做到将项目所有接口封装到模块中（不方便模块化开发）
        const instance = axios.create({
            baseURL: 'https://autumnfish.cn/',//设置基地址
            timeout: 10000 //设置网络超时，超过10秒直接作废
            // headers: {'X-Custom-Header':'foodar'} 自定义请求头

        })

        console.log(instance);

        // 封装接口
        // 1.无参数接口
        function getHots() {
            // instance()返回值是一个promise对象
            return instance({
                url: '/search/hot',
                method: 'get'
            })
        }
        // 调用接口
        getHots().then(res => {
            console.log(res);
        }).catch(err => {
            console.log(res);
        })

        // 2.有参数接口：这里形参名字跟实际 接口的参数名一样，就可以使用解构赋值了
        function searchMusic({ keywords }) {
            return instance({
                url: '/search',
                method: 'get',
                params: {
                    keywords//keywords:keywords
                }
            })
        }
        // 调用有参数的方法
        searchMusic({ keywords: '好日子' }).then(res => {
            console.log("搜索结果 ");
            console.log('res,res');
        })
    </script>
</body>

</html>